<template>
  <div>
    回顾组件通信
    <!-- <Son ref="sonRef" :count="num" @add="num++" @addN="num+=$event" /> -->
    <!-- 语法糖v-model用于简化父模板 -->
    <!-- v-model等效于:value="num" @input="num=$event" -->
    <Son ref="sonRef" v-model="num" />
    <div>token={{ $store.state.user.token }}</div>
    <button @click="setToken">setToken</button>
    <Tom />
    <Jerry />
  </div>
</template>

<script>
import Son from './components/Son.vue'
import Tom from './components/Tom.vue'
import Jerry from './components/Jerry.vue'
export default {
  components: {
    Son,
    Tom,
    Jerry
  },
  data() {
    return {
      num: 0
    }
  },
  mounted() {
    // 父组件通过ref调用子组件方法
    // this.$refs.sonRef.$refs.inputRef.focus
    this.$refs.sonRef.focus()
  },
  methods: {
    setToken() {
      // 方式一调用模块中的mutations
      this.$store.commit('user/setToken', '123')
    }
  }
}
</script>

<style>

</style>
